<template>
  <div>
    <div style="margin-bottom: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>新闻后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>友情链接</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-button type="primary" @click="handleAdd" style="margin-bottom: 20px"
      >新增链接 <i class="el-icon-circle-plus-outline"></i
      ></el-button>
    </div>
    <el-table
        :data="tableData"
        border
        stripe
    >
      <el-table-column type="index" label="ID" width="80"></el-table-column>
      <el-table-column
          prop="linkname"
          label="链接名称"
          width="140"
      ></el-table-column>
      <el-table-column
          prop="linkurl"
          label="链接地址"
          width="400"
      ></el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template v-slot="scope">
          <el-button type="success" circle @click="handleEdit(scope.row)"
          ><i class="el-icon-edit"></i
          ></el-button>
          <el-popconfirm
              class="ml-5"
              confirm-button-text="确定"
              cancel-button-text="我再想想"
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button
                type="danger"
                style="margin-left: 15px"
                icon="el-icon-delete"
                circle
                slot="reference"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 5, 7, 9]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="新增友情链接" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="80px" size="small">
        <el-form-item label="链接名称">
          <el-input v-model="form.linkname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接地址">
          <el-input v-model="form.linkurl" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getLinkList, deleteLink, addOrUpdateLink} from "@/api/Link";

export default {
  data() {
    return {
      dialogFormVisible: false,
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 9,
      form: {},
    }
  },
  created() {
    this.getAllLinkList()
  },
  methods: {
    getAllLinkList() {
      getLinkList(this.pageNum, this.pageSize).then((res) => {
        console.log(res);
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    del(id) {
      deleteLink(id).then((res) => {
        if (res) {
          this.$message.success("删除成功");
          this.getAllLinkList();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    save() {
      console.log(this.form)
      addOrUpdateLink(this.form).then((res) => {
        if (res) {
          console.log(res, 'asasa')
          this.$message.success("保存成功");
          this.dialogFormVisible = false;
          this.getAllLinkList();
        } else {
          this.$message.error("保存失败");
        }
      });
    },
    handleEdit(row) {
      this.form = row;
      this.dialogFormVisible = true;
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.form = {};
    },

    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageSize = pageSize;
      this.getAllLinkList();
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum = pageNum;
      this.getAllLinkList();
    },
  }
}
</script>

<style>

</style>
